<template>
  <el-container style="padding-left: 20px;position: relative">
    <el-tooltip content="显示/隐藏侧边栏" placement="right">
      <el-button :icon="toggleIcon" class="aside-toggle-btn" @click.native="toggleAsideBtn"/>
    </el-tooltip>
    <el-header class="date-search-header">
      <el-date-picker
        v-model="tableQuery.year"
        type="year"
        :clearable="false"
        value-format="yyyy"
        placeholder="选择年"></el-date-picker>
      <div style="display: inline-block;margin: 0 10px"></div>
      <el-button type="primary" @click="fetchData">搜索</el-button>
    </el-header>
    <el-main>
      <component ref="child_report" :is="reportCom" :query="tableQuery" />
    </el-main>
  </el-container>
</template>

<script>
  import {parseTime} from "@/utils"
  import rubbish from './ljl'
  import produce from './sczb'
  import elec_rub from './elec-rub'
  import consume from  './consume'
  import food_one from './food-one'
  import food_two from './food-two'
  import transport from './transport'
  import other from './other'
  const yestoday = parseTime(new Date().getTime()-3600*24*1000,'{y}-{m}-{d}')
  const completeReports = ['rubbish','produce','electricity-rubbish','consume','food','food2','transport']
  export default {
    name: "bigdata-report",
    components:{
      'rubbish':rubbish,
      'produce':produce,
      'electricity-rubbish':elec_rub,
      'consume':consume,
      'food':food_one,
      'food2':food_two,
      'transport':transport,
      'other':other
    },
    data(){
      return {
        toggleIcon:'el-icon-d-arrow-left',
        tableQuery:{
          name:'',
          year:yestoday,
          month:"1",
          module_name:'',
          orgnization_ids:[]
        }
      }
    },
    computed:{
      reportCom(){
        return completeReports.indexOf(this.tableQuery.module_name)>-1?this.tableQuery.module_name:'other'
      }
    },
    mounted() {
      const query = this.$parent.$parent.$data.orgQuery
      this.tableQuery.orgnization_ids=query.orgnization_ids
      this.tableQuery.module_name = query.module_name
      this.$parent.$parent.$data.showModule=true
      this.fetchData()
    },
    methods:{
      toggleAsideBtn(){
        const show = !this.$parent.$parent.$data.showAside
        this.$parent.$parent.controlAside(show)
      },
      fetchData(){
        this.$nextTick(() => {
          this.$refs['child_report'].fetchData()
        })
      },
      factorysSelected(query){
        this.tableQuery.module_name = query.module_name
        this.tableQuery.orgnization_ids=query.orgnization_ids
        this.fetchData()
      }
    }

  }
</script>

<style scoped lang="scss">
  .aside-toggle-btn{
    position: absolute;
    width: 25px;
    height: 80px;
    top: 100px;
    padding: 0;
    left: 0;
  }
   .date-search-header{
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .main-table{
    width: 100%;
  }
  .field-header-col{
    text-align: center;
  }

</style>
